<template>
  <el-form class="app-container">
    <el-form-item label="信息描述">
        <el-tag type="info">excel模板说明</el-tag>
        <el-tag>
          <i class="el-icon-download"/>
          <a :href="'/static/test.xlsx'">点击下载模板</a>
        </el-tag>

    </el-form-item>

    <el-form-item label="选择excel">
      <el-upload
        class="upload-demo"
        ref="upload"
        :on-success="fileUploadSuccess"
        :on-error="fileUploadError"
        :disabled="importBtnDisable"
        :limit="1"
        :action="BASE_API + '/subject/add'"
        name="file"
        accept="application/vnd.ms-excel"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" :loading="loading" size="small" type="success" @click="submitFileUpload">上传到服务器</el-button>
      </el-upload>
    </el-form-item>
  </el-form>
</template>

<script>
  export default {
    /**
     * 添加上传组件上传文件
     */
    name: 'save',
    data() {
      return {
        BASE_API : process.env.BASE_API,
        OSS_PATH : process.env.OSS_PATH,
        importBtnDisable : false, //是否禁用按钮
        loading : false,
      }
    },
    methods: {

      //文件上传成功后的回调
      fileUploadSuccess(){
        //提示上传成功
        this.loading = false;
        this.$message.success('添加课程分类成功');
        this.$router.push('/subject/list')
      },

      //文件上传失败后的回调
      fileUploadError(){
        this.loading = false;
        this.$message.error('添加课程分类失败，请重新上传');
      },

      //提交文件上传的请求
      submitFileUpload(){
        this.importBtnDisable = true;
        this.loading = true;
        this.$refs.upload.submit();
      },
    },
  }
</script>

<style scoped>

  .el-form{
    position: relative;
    width: 30%;
    left: 20%;
    margin-top: 100px;
  }

</style>
